<template>
  <div>
    <el-form :model="form" ref="riskFormRef" :rules="rules" label-position="left">
      <el-row>
        <el-col :span="12">
          <div class="info_l_head">
            <div>个人基本资料</div>
            <el-divider></el-divider>
          </div>
          <div>
            <div class="info_sel">
              <div class="info_sel_l">
                <el-form-item label="姓名" :label-width="formLabelWidth" required>
                  <el-input v-model="form.customerName"></el-input>
                </el-form-item>
                <el-form-item label="年龄" :label-width="formLabelWidth" prop="age" required>
                  <el-input v-model="form.age"></el-input>
                </el-form-item>
                <el-form-item label="籍贯" :label-width="formLabelWidth" prop="nativePlace" required>
                  <el-select
                      class="form_select"
                      v-model="form.nativePlace"
                      placeholder="请选择籍贯"
                      required
                  >
                    <el-option v-for="(v,i) in dict.jgType" :key="i" :label="v.itemName" :value="parseInt(v.dictItemId)"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="婚姻状况" :label-width="formLabelWidth" required>
                  <el-select
                      class="form_select"
                      v-model="form.marriage"
                      placeholder="请选择婚姻状况"
                  >
                    <el-option label="已婚" :value="1"></el-option>
                    <el-option label="未婚" :value="2"></el-option>
                    <el-option label="离异" :value="3"></el-option>
                    <el-option label="丧偶" :value="4"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="证件类型" :label-width="formLabelWidth" required>
                  <el-select
                      class="form_select"
                      v-model="form.credKind"
                  >
                    <el-option v-for="(v,i) in dict.zjType" :key="i" :label="v.itemName" :value="parseInt(v.dictItemId)"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="info_sel_butn">
                <el-form-item label="性别" prop="sex" required>
                  <el-radio-group v-model="form.sex">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="2">女</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="出生日期" :label-width="formLabelWidth" prop="birth" required>
                  <el-date-picker
                      v-model="form.birth"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="民族" :label-width="formLabelWidth" prop="folk" required>
                  <el-select
                      class="form_select"
                      v-model="form.folk"
                      placeholder="请选择民族"
                  >
                    <el-option v-for="(v,i) in dict.mzType" :key="i" :label="v.itemName" :value="parseInt(v.dictItemId)"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="手机号码" :label-width="formLabelWidth" prop="telephone">
                  <el-input v-model="form.telephone"></el-input>
                </el-form-item>
                <el-form-item label="证件号码" :label-width="formLabelWidth" prop="credNum">
                  <el-input v-model="form.credNum" @change="getDataFromIdCard"></el-input>
                </el-form-item>
              </div>
            </div>

            <el-form-item label="现居地址" :label-width="formLabelWidth" required>
              <el-input v-model="form.address"></el-input>
            </el-form-item>
            <el-form-item label="工作单位" :label-width="formLabelWidth">
              <el-input v-model="form.company"></el-input>
            </el-form-item>
            <div class="info_sel">
              <div class="info_sel_l">
                <el-form-item label="二级部门" :label-width="formLabelWidth">
                  <el-input v-model="form.deptname"></el-input>
                </el-form-item>
              </div>

              <div class="info_sel_s">
                <el-form-item label="职务" :label-width="formLabelWidth">
<!--                  <el-select-->
<!--                      class="form_select"-->
<!--                      v-model="form.job"-->
<!--                      placeholder=""-->
<!--                  >-->
<!--                    <el-option v-for="(v,i) in dict.zwType" :key="i" :label="v.itemName" :value="parseInt(v.dictItemId)"></el-option>-->
<!--                  </el-select>-->
                  <el-input v-model="form.job"></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="info_sel">
              <div class="info_sel_l">
                <el-form-item label="职称" :label-width="formLabelWidth">
                  <el-input v-model="form.jobTitle"></el-input>
                </el-form-item>
              </div>
              <div class="info_sel_s">
                <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
                  <el-input v-model="form.email"></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="info_sel">
              <div class="info_sel_l">
                <el-form-item label="文化程度" :label-width="formLabelWidth">
                  <el-select
                      class="form_select"
                      v-model="form.education"
                  >
                    <el-option v-for="(v,i) in educationList" :key="i" :label="v.label" :value="v.label"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="info_sel_l">
                <el-form-item label="职业类别" :label-width="formLabelWidth">
                  <el-select
                      class="form_select"
                      v-model="form.jobCode"
                  >
                    <el-option v-for="(v,i) in dict.zylbType" :key="i" :label="v.itemName" :value="parseInt(v.dictItemId)"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
            <div class="info_sel">
              <div class="info_sel_l">
                <el-form-item label="诊疗ID" :label-width="formLabelWidth">
                  <el-input v-model="form.patientId" ></el-input>
                </el-form-item>
              </div>
              <div class="info_sel_l">
                <el-form-item label="课题人员" :label-width="formLabelWidth">
                  <el-checkbox v-model="form.keti" ></el-checkbox>
                </el-form-item>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :span="11" :offset="1">
          <div class="info_l_head">
            <div>更多信息</div>
            <el-divider></el-divider>
          </div>
          <div>
            <div class="info_sel">
              <div class="info_sel_l">
                <el-form-item label="会员级别" :label-width="formLabelWidth">
                  <el-select
                      class="form_select"
                      v-model="form.vipLevel"
                      clearable
                  >
                    <el-option label="一级" value="1"></el-option>
                    <el-option label="二级" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="会员卡号" :label-width="formLabelWidth">
                  <el-input v-model="form.medicalCard"></el-input>
                </el-form-item>
                <el-form-item label="个人状态" :label-width="formLabelWidth">
                  <el-select
                      class="form_select"
                      v-model="form.source"
                      clearable
                  >
                    <el-option
                    v-for="item in customerStatus"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>

              <div class="info_sel_butn">
                <!-- <avatar :imageUrl="'data:image/png;base64,'+img" @change="getImage"/> -->
                <avatar :imageUrl="form.photo" @change="getImage"/>
              </div>
            </div>

            <el-form-item label="备注" :label-width="formLabelWidth">
              <el-input type="textarea" v-model="form.remark"></el-input>
            </el-form-item>
            <!--
            <div class="info_sel">
              <div class="info_sel_l">
                <el-form-item label="创建时间" :label-width="formLabelWidth">
                  <el-date-picker
                    v-model="form.createdTime"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </div>
              <div class="info_sel_s">
                <el-form-item label="创建人" :label-width="formLabelWidth">
                  <el-input v-model="form.createdPer" ></el-input>
                </el-form-item>
              </div>
            </div>
            -->
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script lang="ts">
import avatar from "./upload/avatar.vue";
import {customerStatus,educationList} from "@src/common/utils/constant";

export default {
  components: {
    avatar
  },
  data() {
    return {
      customerStatus: customerStatus,
      educationList: educationList,
      // formInline:{},
      dialogFormVisible: true,
      formLabelWidth: '80px',
      rules: {
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
          {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
        age: [
          {required: true, message: '请输入年龄', trigger: 'blur'},
        ],
        nativePlace: [
          {required: true, message: '请选择籍贯', trigger: 'blur'},
        ],
        marriage: [
          {required: true, message: '请选择婚姻状况', trigger: 'blur'},
        ],
        sex: [
          {required: true, message: '请选择性别', trigger: 'blur'},
        ],
        birth: [
          {required: true, message: '请输入出生日期', trigger: 'blur'},
        ],
        folk: [
          {required: true, message: '请选择民族', trigger: 'blur'},
        ],
        email:{
          type: 'string',
          required: false,
          message: '请输入正确的邮箱',
          trigger: 'change',
          pattern: /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/
        },
        telephone: {
          type: 'string',
          required: true,
          message: '请输入正确的手机号',
          trigger: 'change',
          pattern: /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/
        },
        credNum: {
          type: 'string',
          required: true,
          message: '请输入正确的身份证号码',
          trigger: 'change',
          pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
        },

      },
      img: '',
      dict: this.dictdata,
      form: {},

    }
  },
  // props: ['getform','object'],  //任何类型的值
  props: {
    queryform: {
      type: Object,
      default: {}
    },
    dictdata: {
      type: Object,
      default: {}
    }
  },
  watch: {
    queryform(newValue, oldValue) {
      this.form = {
        ...newValue,
        sex:parseInt(newValue.sex)||0,
        folk:parseInt(newValue.folk)||0,
        credKind:parseInt(newValue.credKind)||44,
        jobCode:parseInt(newValue.jobCode)||0,
        nativePlace:parseInt(newValue.nativePlace)||0,
        marriage:parseInt(newValue.marriage)||0,
      };
      if(newValue.credNum != ""){
        this.getDataFromIdCard(newValue.credNum)
      }
    },
    dictdata(newValue, oldValue) {
      this.dict = newValue;
      this.form = {...this.form}
    },
  },
  created() {
    this.form = {
        ...this.queryform,
        sex:parseInt(this.queryform.sex)||0,
        // job:parseInt(this.queryform.job)||0,
        folk:parseInt(this.queryform.folk)||0,
        credKind:parseInt(this.queryform.credKind)||44,
        jobCode:parseInt(this.queryform.jobCode)||0,
        nativePlace:parseInt(this.queryform.nativePlace)||0,
        marriage:parseInt(this.queryform.marriage)||0,
      }
  },
  mounted() {
  },
  methods: {
    setAge(idCard){
      if (idCard != null && idCard != "") {
        let birthday = "";
        if (idCard.length == 15) {
          birthday = "19" + idCard.substr(6, 6);
        } else if (idCard.length == 18) {
          birthday = idCard.substr(6, 8);
          //获取性别
          // if (parseInt(idCard.substr(16, 1)) % 2 == 1) {
          //   this.form.sex = 1;
          // } else {
          //   this.form.sex = 2;
          // }
        }
        const birth = birthday.replace(/(.{4})(.{2})/, "$1-$2-");
        var birthDate = new Date(birth);
        var nowDateTime = new Date();
        var age = nowDateTime.getFullYear() - birthDate.getFullYear();
        //月、天的因素;.getMonth()获取的是从0开始
        if (nowDateTime.getMonth() < birthDate.getMonth() || (nowDateTime.getMonth() == birthDate.getMonth() && nowDateTime.getDate() < birthDate.getDate())) {
          age--;
        }
        this.form.age = age
        // console.log(this.form)
        // this.$forceUpdate();
      }
      this.getUser()
    },

    getDataFromIdCard(idCard) {
      if (idCard != null && idCard != "") {
        let birthday = "";
        if (idCard.length == 15) {
          birthday = "19" + idCard.substr(6, 6);
        } else if (idCard.length == 18) {
          birthday = idCard.substr(6, 8);
          // 获取性别
          if (parseInt(idCard.substr(16, 1)) % 2 == 1) {
            this.form.sex = 1;
          } else {
            this.form.sex = 2;
          }
        }
        this.form.birth = birthday.replace(/(.{4})(.{2})/, "$1-$2-");
        var birthDate = new Date(this.form.birth);
        var nowDateTime = new Date();
        var age = nowDateTime.getFullYear() - birthDate.getFullYear();
        //月、天的因素;.getMonth()获取的是从0开始
        if (nowDateTime.getMonth() < birthDate.getMonth() || (nowDateTime.getMonth() == birthDate.getMonth() && nowDateTime.getDate() < birthDate.getDate())) {
          age--;
        }
        this.form.age = age
      }
      this.getUser()
      // this.$forceUpdate()

    },
    getUser(){
      this.$axios.getPeCustomersById({
          credNum: this.form.credNum,
        }).then((res) => {
          if (res.code == "00000" && res.data !== null) {
            const {data} = res
            this.form = {
              ...this.form,
              ...data,
              sex:parseInt(data.sex)||0,
              // job:parseInt(data.job)||0,
              folk:parseInt(data.folk)||0,
              credKind:parseInt(data.credKind)||44,
              jobCode:parseInt(data.jobCode)||0,
              nativePlace:parseInt(data.nativePlace)||0,
              marriage:parseInt(data.marriage)||0,
            };
          }
        });
      this.$forceUpdate();
    },
    getImage(e) {
      this.img = e
      this.form.photo = e
      this.$forceUpdate()
    },
  }
}
</script>

<style scoped>
.info_l {
  text-align: left;
  flex: 1;
}

.info_l_input {
  /* width: 82%; */
}

.info_l_button {
  margin-left: 10px;
}

.info_sel_r_groupn {
  margin-left: 40px;
}

.info_sel {
  display: flex;
  width: 100%;
}

.info_sel_l {
  width: 50%;
}

.info_sel_r {
  width: 50%;
  margin-left: 50px;
}

.info_sel_r_img {
  width: 180px;
  height: 220px;
  margin: 0px auto;
}

.avatar-uploader {
  margin: 0px auto;
  text-align: center;
}

.info_l /deep/ .el-select {
  width: 100%;
}

.info_l_head {
}

.pagination {
  text-align: center;
}

.top_dialog /deep/ .el-dialog {
  margin-top: 5vh !important;
}

.photog {
  width: 600px;
  height: 400px;
}

.info_sel_s_butn {
  margin: 0px auto;
}

.info_sel_butn {
  margin-left: 20px;
}

.info_sel_s {
  margin-left: 20px;
  width: 50%;

}

.add_info .el-divider--horizontal {
  margin-top: 10px;
}
</style>
